<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>客户管理</title>
    <link href="../../../static/css/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="../../../static/js/jquery.js"></script>
    <script type="text/javascript" src="../../../static/js/dateformate.js"></script>
    <script type="text/javascript" src="../../../static/js/checkInfo.js"></script>
    <script>
        //全局信息
        window.datas = {
            addressInfo: [],
            customInfo: {},
        }

        //获取地区信息
        function getAddressInfo() {
            $.ajax({
                url: "/commonProvince",
                type: "get",
                dataType: "json",
                success: (data) => {
                    window.datas.addressInfo = data.data;
                    $(".province").html('<option value="">请选择省份</option>')
                    window.datas.addressInfo.forEach((item, index) => {
                        $(".province").append(`<option value="${item.id}">${item.pname}</option>`)
                    })
                }
            })
        }

        //选择省份之后
        function provinceChange() {
            let addressInfo = datas.addressInfo;
            let city = [];
            let id = $(".province option:selected").val();
            for (let i = 0; i < addressInfo.length; i++) {
                if (addressInfo[i].id == id) {
                    city = addressInfo[i].citys;
                    break;
                }
            }
            $(".city").html('<option value="">请选择</option>')
            city.forEach((item, index) => {
                $(".city").append(`<option value="${item.id}">${item.cname}</option>`);
            })

        }

        //获取表单数据
        function getcustomInfo() {
            datas.customInfo = {
                customname: $(".customname").val(),
                sex: $('input[name=sex]:checked').val(),
                company: $(".company").val(),
                telephone: $(".telephone").val(),
                homeaddress: $(".homeaddress").val(),
                address: $(".city").val(),
                distract: $(".distract").val(),
                status: $(".status").val(),
                createid: JSON.parse(localStorage.getItem("user")).uid,
                createtime: $(".createtime").val(),
            }
        }

        //提交表单
        function addCustom() {
            datas.check.checkAll(() => {
                getcustomInfo();
                if(datas.customInfo.address==""){
                    alert("没有选择城市");
                    return false
                }
                $.ajax({
                    url: "/custom",
                    type: "post",
                    dataType: "json",
                    contentType: "application/json;charset=utf8",
                    data: JSON.stringify(datas.customInfo),
                    success: (data) => {
                        if (data.status == 200) {
                            alert("添加成功")
                            location.href = "/market/customer/findPageAll";
                        }
                    }
                })
            }, (errorMsg) => {
                $("#msg").text(errorMsg)
            })
        }

        $(() => {
            datas.check = new Check([
                {
                    domElement: $(".customname")[0],
                    regex: /^[\u4e00-\u9fa5a-zA-Z0-9]{2,30}$/,
                    resMethod: (resolve, reject) => {
                        let customName=$(".customname").val();
                        $.ajax({
                                url:`/custom/isExist/${customName}`,
                                type: "get",
                                dataType: "json",
                                success: (data) => {
                                    if (!data.flag) {
                                        $("#customNameErrorMsg").text("客户姓名可以正常使用");
                                        $(".customname").css({borderColor: "black"})
                                    } else {
                                        $("#customNameErrorMsg").text("客户姓名已存在");
                                        $(".customname").css({borderColor: "red"})
                                        reject();
                                    }
                                },
                            }
                        )
                    }, rejMethod: () => {
                        $("#customNameErrorMsg").text("客户姓名为2-30个字符");
                        $(".customname").css({borderColor: "red"})
                    },
                    Msg: "客户姓名为2-30个字符"
                },
                {
                    domElement: $(".company")[0],
                    regex: /^[\u4e00-\u9fa5_a-zA-Z0-9_]{2,30}$/,
                    resMethod: () => {
                        $("#companyErrorMsg").text("");
                        $(".company").css({borderColor: "black"})
                    },
                    rejMethod: () => {
                        $("#companyErrorMsg").text("不能超过30个字符");
                        $(".company").css({borderColor: "red"})
                    },
                    Msg: "不能超过30个字符",
                },
                {
                    domElement: $(".telephone")[0],
                    regex: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
                    resMethod: () => {
                        $("#phoneErrorMsg").text("格式正确");
                        $(".telephone").css({borderColor: "black"})
                    },
                    rejMethod: () => {
                        $("#phoneErrorMsg").text("电话号码格式错误");
                        $(".telephone").css({borderColor: "red"})
                    },
                    Msg: "电话号码格式错误",
                },
                {
                    domElement: $(".homeaddress")[0],
                    regex: /^[\u4e00-\u9fa5_a-zA-Z0-9_]{5,130}$/,
                    resMethod: () => {
                        $("#homeaddressErrorMsg").text("");
                        $(".homeaddress").css({borderColor: "black"})
                    },
                    rejMethod: () => {
                        $("#homeaddressErrorMsg").text("联系地址要5-130个字符");
                        $(".homeaddress").css({borderColor: "red"})
                    },
                    Msg: "联系地址要5-130个字符",
                },
            ]);

            getAddressInfo();
            $(".roinput").val(new Date().Format("yyyy-MM-dd HH:mm:ss"));
            $(".createdname").val(JSON.parse(localStorage.getItem("user")).uname);
        })
    </script>
</head>

<body>
<div class="place"><span>位置：</span>
    <ul class="placeul">
        <li>营销管理</li>
        <li>客户管理</li>
        <li>添加</li>
    </ul>
</div>
<div class="formbody">
    <div class="formtitle"><span>客户信息</span></div>
    <form>
        <ul class="forminfo">
            <li>
                <label>姓名</label>
                <input type="text" class="dfinput customname"/>
                <i id="customNameErrorMsg">必填，不能超过30个字符</i>
            </li>
            <li>
                <label>性别</label>
                <cite>
                    <input name="sex" type="radio" value="2" checked="checked"/>男
                    <input name="sex" type="radio" value="1"/>女
                </cite>
            </li>
            <li>
                <label>所属公司名称</label>
                <input name="company" type="text" class="dfinput company"/>
                <i id="companyErrorMsg">必填，不能超过30个字符</i>
            </li>
            <li>
                <label>联系方式</label>
                <input name="telephone" type="text" class="dfinput telephone"/>
                <i id="phoneErrorMsg">必填，不能超过30个字符</i>
            </li>
            <li>
                <label>联系地址</label>
                <input name="homeaddress" type="text" class="dfinput homeaddress"/>
                <i id="homeaddressErrorMsg">必填，不能超过130个字符</i>
            </li>
            <li>
                <label>所属区域</label>
                <select name="address" class="province" onchange="provinceChange()">
                    <option value="">请选择</option>
                </select>
                省
                <select class="city">
                    <option value="">请选择</option>
                </select>
                市
                <i id="addressErrorMsg">必选</i>
            </li>
            <li>
                <label>描述</label>
                <textarea name="distract" class="distract textinput"></textarea>
                <i>可选</i>
            </li>
            <li>
                <label>状态</label>
                <select class="status">
                    <option value="1">可用</option>
                    <option value="0">不可用</option>
                </select>
                <i>必选</i>
            </li>
            <li>
                <label>创建人</label>
                <input name="" type="text" value="" readonly="readonly" class="createdname"/>
                <i>不能编辑</i>
            </li>
            <li>
                <label>创建时间</label>
                <input name="" type="text" value="" readonly="readonly" class="roinput createtime"/>
                <i>不能编辑</i>
            </li>
            <li>
                <label>&nbsp;</label>
                <input name="" type="button" class="btn" value="确定" onclick="addCustom()"/>

                <input name="" type="button" class="btn" value="返回"
                       onclick="window.location.href='/market/customer/findPageAll'"/>
            </li>
        </ul>
    </form>
</div>
</body>
</html>
